<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName">
          <!-- 标签一 -->
          <el-tab-pane label="角色管理" name="first">
            <!-- 添加按钮行 -->
            <el-row style="height: 60px">
              <el-button type="primary" icon="el-icon-plus" @click="showDialog('add')">新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table :data="list" style="width: 100%" :border="true">
              <el-table-column label="序号" width="100" type="index" align="center">
              </el-table-column>
              <el-table-column label="角色名" width="240" prop="name" header-align="center">
              </el-table-column>
              <el-table-column label="描述" prop="description" header-align="center">
              </el-table-column>
              <el-table-column label="操作" width="260" align="center">
                <template slot-scope="scope">
                  <el-button size="small" type="success" @click="assignPerm(scope.row.id)">分配权限</el-button>
                  <el-button size="small" type="primary" @click="showDialog('edit', scope.row.id)">
                    编辑</el-button>
                  <el-button size="small" type="danger" @click="deleteRuleById(scope.row.id)">
                    删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 行 -->
            <el-row type="flex" justify="center" align="middle" style="height: 60px">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageData.page" :page-sizes="[2, 4, 6, 10]" :page-size="pageData.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
            </el-row>
          </el-tab-pane>
          <!-- 标签二 -->
          <el-tab-pane label="公司信息" name="second">
            <el-alert title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改" type="info" show-icon :closable="false">
            </el-alert>
            <!-- 并不是所有的表单都需要 model和rules，这是做校验才需要的 -->
            <el-form label-width="120px" style="margin-top: 50px" :model="companyFormData">
              <el-form-item label="公司名称">
                <el-input style="width: 400px" disabled v-model="companyFormData.name"></el-input>
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input style="width: 400px" disabled v-model="companyFormData.companyAddress"></el-input>
              </el-form-item>
              <el-form-item label="电话">
                <el-input style="width: 400px" disabled v-model="companyFormData.companyPhone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input style="width: 400px" disabled v-model="companyFormData.mailbox"></el-input>
              </el-form-item>
              <el-form-item label="备注" v-model="companyFormData.remarks">
                <el-input type="textarea" row="3" style="width: 400px" disabled></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!-- 弹出层 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" @close="closeDialog">
      <el-form ref="dialogFormRef" :model="ruleDetail" :rules="ruleDetailRules">
        <el-form-item label="角色名称" label-width="120px" prop="name">
          <el-input style="width: 90%" v-model="ruleDetail.name"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" label-width="120px">
          <el-input style="width: 90%" v-model="ruleDetail.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- 点击取消会触发close事件 -->
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹层-给角色分配权限 -->
    <el-dialog title="分配权限" :visible="showPermDialog" @close="btnPermCancel">
      <!-- 权限是一颗树 -->
      <!-- 将数据绑定到组件上 -->
      <!-- check-strictly 如果为true 那表示父子勾选时  不互相关联 如果为false就互相关联 -->
      <!-- id作为唯一标识 -->
      <el-tree ref="permTree" :data="permData" :props="defaultProps" :show-checkbox="true" :check-strictly="true"
        :default-expand-all="true" :default-checked-keys="selectCheck" node-key="id" />
      <!-- 确定 取消 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="small" @click="btnPermOK">确定</el-button>
          <el-button size="small" @click="btnPermCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// 引入接口
import {
  getRoleList,
  getCompanyInfo,
  deleteRuleById,
  getRuleDetailById,
  updateRuleDetailById,
  addRule,
  assignPerm,
} from "@/api/setting";
import { listToTree } from "@/utils";
import { getPermissionList } from "@/api/permission";
// vuex
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      activeName: "first",
      // 角色数组
      list: [],
      // 总数
      total: 0,
      // 页码及相关数据，请求参数
      pageData: {
        page: 1, //页码
        pagesize: 2, //条数
      },
      // 企业信息
      companyFormData: {},
      // 角色详细信息
      ruleDetail: {
        companyId: "",
        description: "",
        name: "",
        permIds: [],
      },
      // 表单校验
      ruleDetailRules: {
        name: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
      },
      // 控制弹层显示
      dialogVisible: false,
      // 弹层名字
      dialogTitle: "",
      // -------------分配权限相关数据
      showPermDialog: false, // 控制分配权限弹层的显示后者隐藏
      defaultProps: {
        label: "name",
      },
      permData: [], // 专门用来接收权限数据 树形数据
      selectCheck: [], // 定义一个数组来接收 已经选中的节点
      roleId: null, // 用来记录分配角色的id
    };
  },
  computed: {
    ...mapGetters(["companyId"]),
  },
  methods: {
    // 发请求获取角色数据
    async getRoleList() {
      const { total, rows } = await getRoleList(this.pageData);
      this.total = total;
      this.list = rows;
    },
    // 改变每一页显示的条数
    handleSizeChange(value) {
      this.pageData.pagesize = value;
      this.getRoleList(); //重新获取数据
    },
    // 改变当前页码是第几页
    handleCurrentChange(value) {
      this.pageData.page = value;
      this.getRoleList(); //重新获取数据
    },
    // 获取企业信息
    async getCompanyInfo() {
      const result = await getCompanyInfo(this.companyId);
      this.companyFormData = result;
    },
    // 根据id删除角色
    async deleteRuleById(id) {
      // this.$confirm("确定要删除这个角色吗？")
      //   .then(async (_) => {
      //     await deleteRuleById(id);
      //     // 重新获取最新的数据
      //     this.getRoleList();
      //   })
      //   .catch((_) => {});

      // this.$confirm会返回一个Promise，所以可以写成await，此时捕获catch可以用try
      try {
        await this.$confirm("确定要删除这个角色吗？");
        // 只用点击了确定才能执行到这个下面
        await deleteRuleById(id);
        this.getRoleList();
        this.$message.success("成功删除角色");
      } catch (error) {
        console.log(error);
      }
    },
    // 根据id获取角色详细信息
    async getRuleDetailById(id) {
      this.ruleDetail = await getRuleDetailById(id);
    },
    // 显示弹层
    async showDialog(type, id) {
      // 判断是否是编辑状态，编辑状态要获取角色信息
      if (type === "edit") {
        this.dialogTitle = "修改角色信息";
        // 获取数据
        await this.getRuleDetailById(id);
      } else {
        this.dialogTitle = "新增角色";
      }
      // 最后再显示，避免出现空白现象
      this.dialogVisible = true;
    },
    // 关闭弹层，会触发这个回调函数
    closeDialog() {
      // this.dialogVisible = false
      this.ruleDetail = {};
      // 重置表单和校验
      this.$refs.dialogFormRef.resetFields();
    },
    // 点击确认，发送请求
    btnOk() {
      // 检验这里的逻辑也可以使用 await和try-catch的写法
      this.$refs.dialogFormRef.validate(async (valid) => {
        // 表单校验通过
        if (valid) {
          if (this.ruleDetail.id) {
            // 编辑模式
            await updateRuleDetailById(this.ruleDetail);
            // 提示
            this.$message.success("修改角色成功");
          } else {
            // 新增
            await addRule({
              name: this.ruleDetail.name,
              description: this.ruleDetail.description,
            });
            // 提示
            this.$message.success("新增角色成功");
          }
          // 重新获取数据渲染
          this.getRoleList();
          // 关闭弹层，会触发dialog的close事件
          this.dialogVisible = false;
        }
      });
    },
    // 点击分配权限
    // 获取权限点数据 在点击的时候调用 获取权限点数据
    async assignPerm(id) {
      this.permData = listToTree(await getPermissionList(), "0"); // 转化list到树形数据
      this.roleId = id;
      // 应该去获取 这个id的 权限点
      // 有id 就可以 id应该先记录下来
      const { permIds } = await getRuleDetailById(id); // permIds是当前角色所拥有的权限点数据
      this.selectCheck = permIds; // 将当前角色所拥有的权限id赋值
      this.showPermDialog = true;
    },
    async btnPermOK() {
      // 调用el-tree的方法
      // console.log(this.$refs.permTree.getCheckedKeys())
      await assignPerm({
        permIds: this.$refs.permTree.getCheckedKeys(),
        id: this.roleId,
      });
      this.$message.success("分配权限成功");
      this.showPermDialog = false;
    },
    btnPermCancel() {
      this.selectCheck = []; // 重置数据
      this.showPermDialog = false;
    },
  },
  created() {
    // 发起请求获取角色数据
    this.getRoleList();
    // 发起请求获取企业信息
    this.getCompanyInfo();
  },
};
</script>

<style scoped>
.el-tabs__item {
  font-size: 16px !important;
}
</style>
